<template>
	<view class="pages">
		<!-- 头部 -->
		<view class="header_bar header_fixed">
			<view class="searchBox " @tap.stop="search()">
				<view class="searchBox-item" >
					<image src="@/static/index/indexSearch.png" mode=""></image>
					<span class="inputStyle">
						请输入商品名称
					</span>
				</view>
			</view>
		</view> 
		<view class="typePage">
			<template>
				<scroll-view scroll-y class="typePage-left">
					<view v-for="(item,index) in flist" :key="item.id" :data-id="item.id"
					class="typePage-left__item b-b" 
					:class="[index === tabActiveIndex?'active':'']"
						@tap="tabtap(item,index)">
						<text>{{ item.cateName }}</text>
					</view>
				</scroll-view>
				<scroll-view scroll-y class="typePage-right" scroll-with-animation="true"
				:scroll-into-view="tabActiveText" @scrolltolower="lower" v-if="isShowPage">
					<view class="" :id="'item-'+tabActiveIndex">
						<view class="typeName" v-if="flist.length > 0">{{ flist[tabActiveIndex].cateName }}</view>
						<view class="typePage-right__list">
							<!--  -->
							<view v-for="(item,index) in categoryLowList" :key="item.id" class="typePage-right__item"
							@tap.stop="$tools.jump('/pages/goods/goodsDetails',item.id)"
							v-if="categoryLowList.length != 0">
								<view class="imgBox">
									<image class="img" :src="item.image" mode="aspectFill"></image>
								</view>
								<view class="content">
									<view class="name">{{ item.storeName }}</view>
									<view class="give">赠送积分:{{ cheng(item.price,systemParam.GIVE_SCORE_MULTIPLE)}}</view>
									<view class="operateBig">
										<view class="price"><text class="unit">￥</text>{{ item.price }}</view>
										<!-- <view class="sales"><image class="ico" src="@/static/index/icon-cart1.png" mode="" /></view> -->
									</view>
								</view>
							</view>
							<view class="initNoData" v-if="categoryLowList.length == 0"></view>
						</view>
					</view>
				</scroll-view>
			</template>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				searchValue: '',
				tabActiveIndex: 0,
				tabActive: 1,
				tabActiveText: '',
				flist: [
					// {id: 1,cateName: '特色美食'},{id: 2,cateName: '服饰内衣'},{id: 3,cateName: '家用百货'},{id: 4,cateName: '数码科技'},
					// {id: 5,cateName: '珠宝配饰'},{id: 6,cateName: '户外运动'},{id: 7,cateName: '箱包'},{id: 8,cateName: '洗护'},{id: 9,cateName: '家电'},{id: 10,cateName: '数码科技'},
					// {id: 11,cateName: '特色美食'},{id: 12,cateName: '服饰内衣'},{id: 13,cateName: '家用百货'},{id: 14,cateName: '数码科技'},
					// {id: 15,cateName: '珠宝配饰'},{id: 16,cateName: '户外运动'},{id: 17,cateName: '箱包'},{id: 18,cateName: '洗护'},{id: 19,cateName: '家电'},
				],
				tabScrollTop: 0,
				lastId: '',
				lsShow: true,
				isShowPage: false,
				categoryLowList: [
					// {id: 1,cateName: '滚筒洗衣机',price: '899.7'},
					// {id: 1,cateName: '扫地机',price: '899.7'},
					// {id: 1,cateName: '柜机空调',price: '899.7'},
					// {id: 1,cateName: '微波炉',price: '899.7'},
					// {id: 1,cateName: '挂式空调',price: '899.7'},
				],
				typeList: [
					{name: '折扣区'},
					{name: '自营区'},
				],
				typeListActive: 0,
				totla:0,
				pages: 1,
				pageIndex: 1,
				pageSize: 10,
				lsShow:false, //是否分页
				systemParam:{}
			}
		},
		onHide() {
			uni.removeStorageSync('pIndex');
		},
		onUnload() {
			uni.removeStorageSync('pIndex');
		},
		onLoad(options) {
			// console.log(options)
			// this.init();
			if(options.value1){
				// 首页点击进来的
				this.indexCateId = options.value1;
				console.log(this.indexCateId)
				this.init();
			}else{
				this.init();
			}
		},
		async onShow() {
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.init();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			init(){
				this.pages = 1;
				this.pageIndex = 1;
				this.pageSize = 10;
				this.isShowPage = false;
				this.flist = [];
				this.categoryLowList=[]
				this.getSystemParam();
				this.getCategoryOneList()
			},
			// 搜索
			search(){
				this.$tools.jump('/pages/search/search',this.typeListActive);
				return;
			},
			// 查询折扣区分类列表
			getCategoryOneList() {
				var data = {
					pageIndex:1,
					pageSize:1000,
				};
				this.$Ajax('/api/product/categoryOneList',data,res => {
						if (res.code == 200) {
							this.flist = res.data.list;
							if(this.indexCateId){
								this.tabActive = this.indexCateId
								const index = this.flist.findIndex(item=>item.id == this.indexCateId)
								console.log('index',index,',tabActive',this.tabActive)
								if(index>-1){
									this.tabActiveIndex = index
								}
							}else{
								this.tabActiveIndex = 0;
								this.tabActive = res.data.list[0].id;
							}
							this.getCategoryLowList();
						}
					}, err =>{
					}, 'GET'
				)
			},
			// 查询折扣区
			getCategoryLowList() {
				var data = {
					pageIndex:this.pageIndex,
					pageSize:this.pageSize,
					cateId:this.tabActive
				};
				// uni.showLoading({
				// 			mask:true
				// 	})
				this.$Ajax('/api/product/discountList',data,res => {
						if (res.code == 200) {
							this.categoryLowList = this.categoryLowList.concat(res.data.list);
							console.log('length',this.categoryLowList.length)
							this.total = res.data.total
							this.isShowPage = true;
							if(this.categoryLowList.length < this.total){
								this.lsShow = true;
								this.pageIndex ++;
							}else{
								this.lsShow = false;
							}
						}
						uni.hideLoading();
					}, err =>{
						uni.hideLoading();
						this.isShowPage = true;
					}, 'GET'
				)
			},
			//一级分类点击
			tabtap(item,index) {
				if(this.tabActive != item.id){
					this.tabActive = item.id;
					this.tabActiveText = 'item-' + item.id;
					this.tabActiveIndex = index;
					this.isShowPage = false;
					this.pages = 1;
					this.pageIndex = 1;
					this.pageSize = 10;
					this.categoryLowList=[]
					this.getCategoryLowList();
				}
			},
			lower(){
					console.log("分页",this.lsShow);
					if(this.lsShow == true){
							this.getCategoryLowList();
					}else{
							// return this.$tools.toast('到底了');
					}
			},
		}
	}
</script>

<style lang="scss" scoped>
.pages{
	background: #fff;
}
	.searchBox{
		width:93.6%;
		margin: auto;
		margin-top: 30rpx;
		height: 80rpx;
		background: #F6F6F6;	
		border-radius: 112rpx;
		&-item{
			padding: 0rpx 4rpx 0rpx 32rpx;
			span{
				padding: 0 12rpx;
			}
			input{
				width: 50%;
				position: relative;
				z-index: 1;
			}
		}
		&-btn{
			background: #EE3A33;
			border-radius: 56rpx;
			padding: 20rpx 56rpx;
			margin: 8rpx;
		}
	}
	
	.typePage{
		position: relative;
		z-index: 2;
		&-left{
			&__item{
				&:nth-child(1){
					border-radius: 0 10rpx 0 0;
				}
			}
		}
		&-right{
			// height: calc(100% - 60rpx);
		}
		.give{
			margin-top: 10rpx;
			padding: 2px 7px;
			border-radius: 12px;
			background: #FFF4EE;
			font-size: 10px;
			color: #EE3A33;
			line-height: 14px;
		}
	}
	
	.shopList{
		width: 100%;
		height: 100%;
		overflow: scroll;
		padding: 0 30rpx;
		&-height{
			height: 100%;
		}
		&-list{
			background: #FFFFFF;
			box-shadow: 4rpx 4rpx 5rpx 0rpx rgba(0,0,0,0.15);
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			&__item{
				margin-bottom: 0 !important;
			}
		}
	}
	
</style>